<template>
	<view class="newMember">
		<n-loading></n-loading>
		<view :style="{ paddingTop: (statusBarHeight*2+104) + 'rpx' }">
			<top-bar :type="topTabType" :transparentFixedFontColor="topTabFontColor" title="会员"></top-bar>
			<image class="menberBj" :src="bigBj[vipIndex]" mode=""></image>
			<!-- 会员卡 -->
			<view class="loyaltyCard">
				<!-- 会员卡背景 -->
				<image class="gradeBj" :src="vipBj[vipIndex][0]"></image>
				<!-- 显示内容 -->
				<view class="contBox">
					<!-- 当前等级/待提升  -->
					<view class="grandCurrent" 
					:class="{color1:vipIndex==0 || vipIndex==1 || vipIndex==2 || vipIndex==3,color2:vipIndex==4 || vipIndex==5 || vipIndex==6,color3:vipIndex==7 || vipIndex==8 || vipIndex==9,color4:vipIndex==10}" 
					 v-if="vipCont.is_now_level==1">
						<view class="topBox">
							<view class="cur"><text>当前等级</text></view>
							<view class="title">
								{{vipCont.title_first}} 
								<text class="vipL">{{vipCont.title_last}}</text>
								<text class="tips">金币对应经验×1.5倍</text>
							</view>
							<view class="nextInfo">{{vipIndex==10?'已到达最高等级':nextVip.title_last+'经验'+nextVip.val}}</view>
							<view class="curInfo">{{vipCont.title_last}}经验{{vipCont.val}}，当前经验{{score}}</view>
						</view>
						<view class="bottomBox"
						 :class="{color1:vipIndex==0 || vipIndex==1 || vipIndex==2 || vipIndex==3,color2:vipIndex==4 || vipIndex==5 || vipIndex==6,color3:vipIndex==7 || vipIndex==8 || vipIndex==9,color4:vipIndex==10}" >
							升级可享受更多权益
							<view class="upgradeBtn" @tap="strategyGo">升级攻略</view>
						 </view>
						 <!-- 进度条 -->
						 <view class="progressBar">
							 <image :src="progressBar[vipIndex]" mode=""></image>
						 </view>
					</view>
				</view>
			</view>
			<!-- 通知 -->
			<view class="notice">
				<image class="gift" src="../../static/svgIcon/gift.svg" mode=""></image>
				<view class="long">您有一份专属升级权益礼包待领取</view>
				<text>去看看</text>
				<u-icon name="arrow-right" color="#FF5238" size="20"></u-icon>
			</view>
			<!-- 品酒会 -->
			<view class="shakySwiper">
				<view class="swiperBox">
					<swiper class="swiper" @change="shakyChange" :autoplay="true">
						<swiper-item v-for="(item,index) of bannerList" :key="index">
							<view class="imgBox" @tap="goBannerInfo(item.type,item.content)">
								<dh-image class="niccImg" :src="item.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="swiperDots">
					<view class="dots" :class="{dotsEd:shakyIndex==index}" v-for="(item,index) of bannerList" :key="index"></view>
				</view>
			</view>
			<!-- 会员尊享权益 -->
			<view class="benefits">
				<view class="benefitsTitBox">
					<view class="tit">会员尊享权益</view>
					<view class="more" @tap="moreRights">
						<text>更多</text>
						<u-icon name="arrow-right" color="#999" size="20"></u-icon>
					</view>
				</view>
				<view class="benefitsSwiper">
					<view class="swiperBox">
						<swiper class="swiper" @change="benefitsChange" :autoplay="true">
							<swiper-item v-for="(right,index) of resRights" :key="index">
								<view class="benefitsItem">
									<view class="each" v-for="(small,j) of right" :key="j">
										<image class="icon" :src="small.logo" mode=""></image>
										<view class="tit">{{small.title}}</view>
										<view class="tips ellipsis">{{small.subtitle}}</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="swiperDots">
						<view class="dots" v-for="(right,index) of resRights" :key="index" :class="{dotsEd:benefitsIndex==index}"></view>
					</view>
				</view>
			</view>
			<!-- 立即存酒 -->
			<view class="storeWine">
				<view class="tit1">全新酒卡</view>
				<view class="tit2">存酒领收益</view>
				<view class="btn" @tap="storeWineGo">立即存酒</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topTabType:'transparentFixed',
				topTabFontColor:'#333',
				// 导航栏高度
				statusBarHeight: 0,
				bigBj:[
					'https://lovebirdopen.com/static/img/cBj/memberBjVip1.png',
					'https://lovebirdopen.com/static/img/cBj/memberBjVip1.png',
					'https://lovebirdopen.com/static/img/cBj/memberBjVip1.png',
					'https://lovebirdopen.com/static/img/cBj/memberBjVip1.png',
					'https://lovebirdopen.com/static/img/cBj/memberBjVip2.png',
					'https://lovebirdopen.com/static/img/cBj/memberBjVip2.png',
					'https://lovebirdopen.com/static/img/cBj/memberBjVip2.png',
					'https://lovebirdopen.com/static/img/cBj/memberBjVip3.png',
					'https://lovebirdopen.com/static/img/cBj/memberBjVip3.png',
					'https://lovebirdopen.com/static/img/cBj/memberBjVip3.png',
					'https://lovebirdopen.com/static/img/cBj/memberBjVip3.png',
					'https://lovebirdopen.com/static/img/cBj/memberBjVip4.png'
				],
				// 会员卡背景
				vipBj:[
					['https://lovebirdopen.com/static/img/grade/Silver2.svg'],
					['https://lovebirdopen.com/static/img/grade/Silver2.svg'],
					['https://lovebirdopen.com/static/img/grade/Silver2.svg'],
					['https://lovebirdopen.com/static/img/grade/Silver2.svg'],
					['https://lovebirdopen.com/static/img/grade/gold2.svg'],
					['https://lovebirdopen.com/static/img/grade/gold2.svg'],
					['https://lovebirdopen.com/static/img/grade/gold2.svg'],
					['https://lovebirdopen.com/static/img/grade/supreme2.svg'],
					['https://lovebirdopen.com/static/img/grade/supreme2.svg'],
					['https://lovebirdopen.com/static/img/grade/supreme2.svg'],
					['https://lovebirdopen.com/static/img/grade/diamond2.svg'],
				],
				// 进度条
				progressBar:[
					'https://lovebirdopen.com/static/img/grade/progressBar1.png',
					'https://lovebirdopen.com/static/img/grade/progressBar1.png',
					'https://lovebirdopen.com/static/img/grade/progressBar1.png',
					'https://lovebirdopen.com/static/img/grade/progressBar1.png',
					'https://lovebirdopen.com/static/img/grade/progressBar2.png',
					'https://lovebirdopen.com/static/img/grade/progressBar2.png',
					'https://lovebirdopen.com/static/img/grade/progressBar2.png',
					'https://lovebirdopen.com/static/img/grade/progressBar3.png',
					'https://lovebirdopen.com/static/img/grade/progressBar3.png',
					'https://lovebirdopen.com/static/img/grade/progressBar3.png',
					'https://lovebirdopen.com/static/img/grade/progressBar4.png'
				],
				score:0,
				//活动轮播
				bannerList:null,
				vipCont:null,
				prevVip:null,
				nextVip:null,
				vipList:[],
				vipIndex:0,
				// 活动图切换
				shakyIndex:0,
				// 权益切换
				benefitsIndex:0,
				// 权益数据
				resRights:[],
			}
		},
		onLoad: function (option) {
			this.getVipInfo();
			this.getBanner();
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		onPageScroll(e) {
			if(e.scrollTop>50){
				this.topTabType = 'fixed';
				this.topTabFontColor = '';
			}
			if(e.scrollTop < 50){
				this.topTabType = 'transparentFixed';
				this.topTabFontColor = '#333';
			}
		},
		methods: {
			// 广告位banner
			getBanner(){
				this.apiget('/fun/advert-position/detail',{code:'mall_vip'}).then(res =>{
					if(res.data.status == 200 ) {
						this.bannerList = res.data.data.advert;
					}
				})
			},
			getVipInfo(){
				var _this = this;
				this.apiget('/fun/member/get-benefits',{}).then(res =>{
					if(res.data.status == 200 ) {
						// vip
						this.vipList = res.data.data.result;
						this.score = parseInt(res.data.data.accumulate);
						this.vipList.forEach((v,i) => {
							if(v.is_now_level == 1){
								_this.vipIndex = i;
								_this.vipCont = v;
								_this.prevVip = _this.vipList[i-1];
								_this.nextVip = _this.vipList[i+1];
							}
						})
						// 权益数据
						let baseArray =  res.data.data.list;
						  let len = baseArray.length;
						  let n = 3; //假设每行显示4个
						  let lineNum = len % 3 === 0 ? len / 3 : Math.floor( (len / 3) + 1 );
						  for (let i = 0; i < lineNum; i++) {
						    // slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
						    let temp = baseArray.slice(i*n, i*n+n);
						    this.resRights.push(temp);
						  }
					}
				})
			},
			// 升级攻略
			strategyGo(){
				uni.navigateTo({
					url: './memberStrategy'
				});
			},
			// 活动图切换
			shakyChange(e){
				this.shakyIndex = e.target.current;
			},
			// banner跳详情
			goBannerInfo(type,content){
				if(content!='' && content!=null){
					if(type==1){//文章
						uni.navigateTo({
							url: '/pages/index/newsDetail?id='+content
						});
					}else if(type==2){//url
						
					}else if(type==3){//商品
						uni.navigateTo({
							url: '/pages/index/goodsInfo?id='+content
						});
					}else if(type==4){//商铺
						uni.navigateTo({
							url: '/pages/publicPraise/storeInfo?id='+content+'&other=1'
						});
					}
				}
			},
			benefitsChange(e){
				this.benefitsIndex = e.target.current;
			},
			// 更多权益
			moreRights(){
				uni.navigateTo({
					url: './newGradeRights'
				});
			},
			// 去存酒
			storeWineGo(){
				uni.navigateTo({
					url: '../scanCode/wineStorage'
				});
			},
		}
	}
</script>

<style lang="scss">
	.newMember{
		width: 100%;
		min-height: 100%;
		padding: 0 32rpx 134rpx;
		background: #F8F8FA;
	}
	.menberBj{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 790rpx;
	}
	.loyaltyCard{
		position: relative;
		height: 368rpx;
		
		.gradeBj{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		
		.contBox{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
			overflow: hidden;
			
			
			// 当前等级
			.grandCurrent{
				position: relative;
				width: 100%;
				height: 100%;
				
				.progressBar{
					position: absolute;
					left: 0;
					top: 132rpx;
					width: 100%;
					height: 84rpx;
					padding: 0 32rpx;
					
					image{
						width: 100%;
						height: 100%;
					}
				}
				
				.topBox{
					padding: 48rpx 32rpx 0;
					
					.cur{
						text{
							display: inline-block;
							height: 36rpx;
							padding: 0 8rpx;
							font-size: 24rpx;
							line-height: 36rpx;
							background: rgba(255, 255, 255, 0.54);
							border-radius: 8rpx;
						}
					}
					
					.title{
						height: 64rpx;
						margin-top: 8rpx;
						margin-bottom: 30rpx;
						font-weight: 900;
						font-size: 36rpx;
						line-height: 64rpx;
						
						.vipL{
							font-size: 48rpx;
						}
						.tips{
							margin-left: 16rpx;
							font-size: 24rpx;
							opacity: 0.7;
						}
					}
					
					.nextInfo{
						height: 32rpx;
						margin-bottom: 6rpx;
						font-size: 20rpx;
						line-height: 32rpx;
						text-align: right;
					}
					.curInfo{
						height: 32rpx;
						margin-bottom: 32rpx;
						font-size: 20rpx;
						line-height: 32rpx;
					}
				}
				
				.bottomBox{
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 80rpx;
					padding: 0 32rpx;
					font-size: 28rpx;
					line-height: 80rpx;
					background: rgba(0, 0, 0, 0.02);
					.upgradeBtn{
						float: right;
						display: inline-block;
						width: 144rpx;
						height: 52rpx;
						margin-top: 14rpx;
						font-size: 24rpx;
						line-height: 52rpx;
						color: #FFFFFF;
						text-align: center;
						border-radius: 50px;
					}
				}
				
			}
			.color1{
				color: #555C6E;
				.upgradeBtn{
					background: linear-gradient(96.27deg, #95B1E9 6.37%, #4D5567 92.17%);
				}
			}
			.color2{
				color: #B97300;
				.upgradeBtn{
					background: linear-gradient(96.27deg, #F2B551 6.37%, #D36703 92.17%);
				}
			}
			.color3{
				color: #FFF9F5;
				.upgradeBtn{
					background: linear-gradient(96.27deg, #88C8FF 6.37%, #1481FF 92.17%);
				}
			}
			.color4{
				color: #A6834D;
				.upgradeBtn{
					background: linear-gradient(96.27deg, #E8BC77 6.37%, #A6834D 92.17%), linear-gradient(96.27deg, #99D0FF 6.37%, #2087FF 92.17%);
				}
				
				.cur{
					color: #fff;
					
					text{
						background: linear-gradient(96.27deg, #E8BC77 6.37%, #A6834D 92.17%), rgba(255, 255, 255, 0.54) !important;
					}
				}
				
				.title,.info,.bottomBox,.tips{
					    background: -webkit-linear-gradient(left, #F4D6A7, #A6834D);
					    background: linear-gradient(to right, #F4D6A7, #A6834D);
					    -webkit-background-clip: text;
					    color: transparent;
				}
				
				.nextInfo,.curInfo{
					opacity: 0.7;
				}
			}
		}
	}
	
	.notice{
		position: relative;
		display: flex;
		margin: 16rpx 0;
		padding: 30rpx 40rpx 26rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #FF5238;
		background: #FFE2DE;
		align-items: center;
		box-shadow: 0px 4rpx 16rpx rgba(255, 82, 56, 0.02);
		border-radius: 48rpx;
		
		.gift{
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}
		.long{
			flex: 1;
			width: 1px;
		}
		.u-icon{
			margin-left: 12rpx;
		}
	}
	
	.shakySwiper{
		position: relative;
		height: 140rpx;
		border-radius: 16rpx;
		overflow: hidden;
		
		.swiperDots{
			position: absolute;
			bottom: 7rpx;
			left: 0;
			width: 100%;
			height: 6rpx;
			padding: 0 48rpx;
			font-size: 0;
			
			.dots{
				float: left;
				width: 16rpx;
				height: 100%;
				margin-right: 8rpx;
				background: rgba(0, 0, 0, 0.12);
				opacity: 0.4;
				border-radius: 34rpx;
			}
			.dotsEd{
				width: 32rpx;
				background: rgba(0, 0, 0, 0.24);
			}
		}
		
		.swiperBox{
			width: 100%;
			height: 100%;
			
			.swiper{
				width: 100%;
				height: 100%;
				
				.imgBox{
					width: 100%;
					height: 100%;
					
					.niccImg{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	
	.benefits{
		position: relative;
		margin-top: 16rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.03);
		border-radius: 16rpx;
		
		.benefitsTitBox{
			padding: 20rpx 32rpx;
			display: flex;
			align-items: center;
			
			.tit{
				flex: 1;
				font-size: 32rpx;
				line-height: 48rpx;
				color: #333333;
				font-weight: 900;
			}
			.more{
				font-size: 24rpx;
				color: #666666;
			}
		}
		.benefitsSwiper{
			position: relative;
			width: 100%;
			height: 260rpx;
			
			.swiperDots{
				position: absolute;
				bottom: 32rpx;
				left: 0;
				width: 100%;
				height: 8rpx;
				text-align: center;
				font-size: 0;
				
				.dots{
					display: inline-block;
					width: 16rpx;
					height: 100%;
					margin: 0 4rpx;
					background: #FFE1DE;
					border-radius: 34rpx;
				}
				.dotsEd{
					width: 32rpx;
					background: #FF5238;
				}
			}
			
			.swiperBox{
				width: 100%;
				height: 220rpx;
				
				.swiper{
					width: 100%;
					height: 100%;
					
					.benefitsItem{
						display: flex;
						height: 220rpx;
						// justify-content: center;
						align-items: center;
						text-align: center;
						
						.each{
							flex: 1;
							width: 1px;
							
							.icon{
								display: inline-block;
								width: 96rpx;
								height: 96rpx;
								
							}
							.tit{
								font-weight: 900;
								font-size: 28rpx;
								line-height: 40rpx;
								color: #333333;
							}
							.tips{
								font-size: 20rpx;
								line-height: 40rpx;
								color: #999999;
							}
						}
					}
				}
			}
		}
	}
	
	
	.storeWine{
		width: 100%;
		height: 336rpx;
		padding-left: 72rpx;
		padding-top: 74rpx;
		margin-top: 16rpx;
		background: url('https://lovebirdopen.com/static/img/cBj/storeWineBj.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 16rpx;
		color: #fff;
		
		.tit1{
			font-size: 28rpx;
			line-height: 44rpx;
		}
		.tit2{
			font-size: 32rpx;
			line-height: 48rpx;
		}
		.btn{
			display: inline-block;
			padding: 13rpx 32rpx;
			margin-top: 32rpx;
			font-size: 32rpx;
			line-height: 36rpx;
			color: #FF5238;
			background: #FFFFFF;
			border-radius: 42rpx;
		}
	}
</style>
